<!-- 导航栏组件 -->
<template>
  <div class="shell" style="background-color: #171d25">
    <!-- 顶部栏菜单 -->
    <div class="menu">
      <div class="m-bnt">
        <!-- logo和名称以及天气状况 -->
        <div class="logo">
          <img src="@/assets/CodeRealm.png" />
          <span>CodeRealm</span>
        </div>
        <!-- 地区、天气、温度，并且使用了element-plus的弹出框在鼠标移到上面显示更多信息 -->
        <el-popover placement="top-start" trigger="hover"
          :content="`${place||''}`">
          <template #reference>
            <span>{{ $store.state.weather.location?.city||'' }}</span>
          </template>
        </el-popover>
        <el-popover placement="top-start" trigger="hover"
          :content="`风况: ${$store.state.weather.now?.wind_class||''}${$store.state.weather.now?.wind_dir||''}`">
          <template #reference>
            <span>{{ $store.state.weather.now?.text||'' }}</span>
          </template>
        </el-popover>
        <el-popover placement="top-start" trigger="hover"
          :content="`体感温度: ${$store.state.weather.now?.feels_like||''}°C`">
          <template #reference>
            <span v-if="this.$store.state.weather.now?.temp||false">温度: {{ $store.state.weather.now?.temp||'' }}°C</span>
          </template>
        </el-popover>
      </div>
      <!-- 自定义顶部的客户端操作按钮，最小化、最大化、关闭 -->
      <div class="icons">
        <SemiSelect @click="operateMenu('min')" class="menu-icon" />
        <FullScreen v-if="!ifMax" @click="operateMenu('max')" class="menu-icon" />
        <CopyDocument v-else @click="operateMenu('resize')" class="menu-icon" />
        <CloseBold @click="operateMenu('close')" class="close-icon menu-icon" />
      </div>
    </div>
    <!-- 页面跳转按钮，对应每个子页面 -->
    <div class="t-nav">
      <!-- 两个图标对应前进和后退 -->
      <div class="nav">
        <Back class="ic tran-ani" @click="routerTo(-1)" />
      </div>
      <div class="nav">
        <Right class="ic tran-ani" @click="routerTo(1)" />
      </div>
      <!-- 用户的六个页面 -->
      <div class="nav" v-if="$store.state.identity == 0">
        <span :class="{ navAct: $store.state.curView == 1 }" class="tran-ani" @click="choseNav(1)">商店</span>
      </div>
      <div class="nav" v-if="$store.state.identity == 0">
        <span :class="{ navAct: $store.state.curView == 2 }" class="tran-ani" @click="choseNav(2)">游戏库</span>
      </div>
      <div class="nav" v-if="$store.state.identity == 0">
        <span :class="{ navAct: $store.state.curView == 3 }" class="tran-ani" @click="choseNav(3)">购物车</span>
      </div>
      <div class="nav" v-if="$store.state.identity == 0">
        <span :class="{ navAct: $store.state.curView == 4 }" class="tran-ani" @click="choseNav(4)">个人信息</span>
      </div>
      <div class="nav" v-if="$store.state.identity == 0">
        <span :class="{ navAct: $store.state.curView == 5 }" class="tran-ani" @click="choseNav(5)">聊天室</span>
      </div>
      <div class="nav" v-if="$store.state.identity == 0">
        <span :class="{ navAct: $store.state.curView == 6 }" class="tran-ani" @click="choseNav(6)">音乐盒</span>
      </div>
      <!-- 开发者的两个页面 -->
      <div class="nav" v-if="$store.state.identity == 1">
        <span :class="{ navAct: $store.state.curView == 1 }" class="tran-ani" @click="choseNav(6+1)">游戏管理</span>
      </div>
      <div class="nav" v-if="$store.state.identity == 1">
        <span :class="{ navAct: $store.state.curView == 2 }" class="tran-ani" @click="choseNav(6+2)">游戏上架</span>
      </div>
      <div class="nav" v-if="$store.state.identity == 1">
        <span :class="{ navAct: $store.state.curView == 3 }" class="tran-ani" @click="choseNav(6+3)">数据分析</span>
      </div>   
      <!-- 管理员的三个页面 -->
      <div class="nav" v-if="$store.state.identity == 2">
        <span :class="{ navAct: $store.state.curView == 1 }" class="tran-ani" @click="choseNav(9+1)">内容审核</span>
      </div>
      <div class="nav" v-if="$store.state.identity == 2">
        <span :class="{ navAct: $store.state.curView == 2 }" class="tran-ani" @click="choseNav(9+2)">用户管理</span>
      </div>
      <div class="nav" v-if="$store.state.identity == 2">
        <span :class="{ navAct: $store.state.curView == 3 }" class="tran-ani" @click="choseNav(9+3)">监控与维护</span>
      </div>
      <!-- 注销 -->
      <div class="nav logout">
        <span class="tran-ani" style="line-height: 30px;" @click="logout">注销</span>
      </div>
    </div>
  </div>
</template>

<script lang="js">

export default {
  name: "t-navWorld",
  props: {
    msg: String,
  },
  data() {
    return {
      ifMax: false,
      pathArr: ['shop', 'library', 'cart', 'user', 'chat', 'music', 'gamemanager', 'gameupload','analysis', 'examine', 'usermanager', 'devops'],
    }
  },
  computed:{
    place(){
      const obj = this.$store.state.weather?.location || '';
      if(obj=='') return ''
      return `${obj.country||''}${obj.province||''}`
      // return `1`
    }
  },
  methods: {
    choseNav(flag) {
      this.$router.push(`/home/${this.pathArr[flag - 1]}?id=${flag}`);
      // home子页面跳转
    },
    operateMenu(text) {
      if (text == 'max' || text == 'resize') this.ifMax = !this.ifMax;
      this.$ipc.sendSync('operateMenu', text)
    },
    routerTo(tag) {
      // 如果是返回操作且返回的目标是登录页，则阻止返回
      if (tag < 0) {
        // 获取当前路由历史
        const history = window.history;
        // 检查返回的目标是否是登录页（路径为'/'）
        if (history.state && history.state.back === '/') {
          console.log('阻止返回到登录页');
          return; // 阻止返回操作
        }
      }
      this.$router.go(tag);
    },
    logout() {
      localStorage.removeItem('games');
      // 跳转到登录页
      this.$router.push('/');
    },
    openDev(){
      this.$ipc.sendSync('devTool','dev')
    },
    // 获取ip定位
    getDeviceLocation() {
      const that = this;
      that.$elaxios.get('https://api.map.baidu.com/location/ip', {
          params: {
              ak: 'DYgNaKmEbTUCSiZ8d3YsWK7ah7C2vv9F',
          }
      }).then((response) => { 
          console.log(response)
          that.getWeather(response.data.content.address_detail.adcode)
      }).catch(function (error) {
          console.log(error);
      });
    },
    // 获取天气情况 
    getWeather(id) {
      const that = this;
      that.$elaxios.get('https://api.map.baidu.com/weather/v1/', {
          params: {
              ak: 'DYgNaKmEbTUCSiZ8d3YsWK7ah7C2vv9F',
              data_type: 'all',
              district_id: id,
          }
      }).then((response) => {
          that.$store.commit('saveWeather',response.data.result);
      }).catch(function (error) {
          console.log(error);
      });
    }
  },
  created() {
    this.getDeviceLocation();
  }
};
</script>
<style lang="less" scoped>

.navAct {
  color: rgb(26, 159, 255) !important;
  border-bottom: 3px solid rgb(26, 159, 255);
}

.tran-ani {
  transition: all 0.1s ease 0.1s;
}

.ic {
  width: 22px;
  height: 22px;
  vertical-align: middle;
  color: #67707b;
  cursor: pointer;

  &:hover {
    color: #dcdedf;
  }
}
// 菜单样式控制
.menu {
  display: flex;
  text-align: right;
  align-items: center;
  justify-content: space-between;
  height: 34px;
  -webkit-app-region: drag;

  .m-bnt {
    margin-left: 14px;
    display: flex;
    align-items: center;

    span {
      -webkit-app-region: no-drag;
      font-size: 12px;
      margin: 2px 8px 0px 6px;
      transition: all 0.1s ease 0.1s;
      color: #8b929a;
      cursor: pointer;

      &:hover {
        color: #e0e1e6;
      }
    }

    .logo {
      -webkit-app-region: no-drag;

      &:hover {
        color: #e0e1e6;
      }

      img {
        width: 15px;
        height: 15px;
        vertical-align: middle;
      }
    }
  }

  .icons {
    -webkit-app-region: no-drag;
    .menu-icon {
      cursor: pointer;
      width: 17px;
      height: 17px;
      padding: 8px;
      color: #788a92;

      &:hover {
        background-color: #3d4450;
        color: #e0e1e6;
      }
    }

    .close-icon {
      &:hover {
        background-color: #e22a27;
        color: #e0e1e6;
      }
    }
  }
}
// 按钮样式控制
.t-nav {
  display: flex;
  align-items: center;
  background-color: #171d25;
  -webkit-app-region: drag;
  .nav {
    padding: 0px 10px 10px 10px;
    background-color: #171d25;
    color: #dcdedf;
    font-size: 18px;
    height: 28px;
    line-height: 28px;
    -webkit-app-region: no-drag;
    white-space: nowrap;
    cursor: pointer;

    span {
      padding-bottom: 2px;

      &:hover {
        color: #fff;
      }
    }

    &:hover .navs {
      display: block;
    }
  }
  .logout {
    position: absolute;
    right: 5px;
    background-color: #333;
    color: #fff ;
    height: 20px;
    border-radius: 4px;
    font-size: 12px;
    &:hover{
      background-color: #b63737;
      span{
        color: #fff;
      }
    }
  }
}
</style>
